<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewpor" content="width=deice-width,initial-scale=1.0">
    <title>CSS布局及动画</title>
    <link rel="stylesheet" href="./css/main.css">
    <link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.css" rel="stylesheet">>
    <style>
        .none {
            display: none;
        }
    </style>
</head>

<body>
    <header>
        <h1>CSS布局及动画</h1>
    </header>
    <main>
        <section>
            <h2>display</h2>
            <p class="none">元素如何显示，可以通过 display 属性进行指定。每一个元素都有一个默认的 display 属性，
                但这个属性值可以修改。块元素和行内元素可通过 display 属性改变它们的显示方式，比如在某些
                情景，编辑人员需要给行内元素添加高度，以改进元素的显示效果，行内元素是无法直接通过 width
                属性指定宽度的，但可以通过 display 属性将其变为块元素，再为其添加高度。</p>
        </section>
        <section>
            <style>
                #head {
                    border: 1px #CCC solid;
                    width: 410px;
                    height: 100px;
                    margin-bottom: 10px;
                }

                #main {
                    border: 1px #CCC solid;
                    width: 400px;
                    /* height: 200px; */
                    margin-bottom: 10px;
                    padding: 5px;
                    overflow: hidden;
                }

                #left {
                    border: 1px #CCC solid;
                    width: 100px;
                    height: 100px;
                    float: left;
                }

                #middle {
                    border: 1px #CCC solid;
                    width: 184px;
                    height: 100px;
                    float: left;
                    margin-left: 5px;
                    /* padding: 2px; */
                }

                #right {
                    border: 1px #CCC solid;
                    width: 100px;
                    height: 100px;
                    margin-left: 5px;
                    float: left;
                    margin-right: 5px;

                }

                .clearfix:before,
                .clearfix:after {
                    display: table;
                    content: " ";
                }

                .clearfix:after {
                    clear: both;
                }

                .back-top {
                    width: 50px;
                    height: 50px;
                    background-color: #CCC;
                    border: 1px #aaaaaa solid;
                    text-align: center;
                    line-height: 50px;
                    border-radius: 5px;
                    position: fixed;
                    right: 10px;
                    bottom: 50px;
                }

                .f-l {
                    float: left;
                    width: 32%;
                    margin-right: 1em;
                }

                #position-sec {
                    overflow: hidden;
                }

                .relative {
                    position: relative;
                    top: 50px;
                }

                .absolute {
                    position: absolute;
                    top: 50px;
                    z-index: -1;
                }

                .bg {
                    background-color: #fcc;
                }
            </style>
            <div id="head">头部</div>
            <div id="main">
                <div class="clearfix">
                    <div id="left">左侧</div>
                    <!-- <div id="middle">中间</div> -->
                    <div id="right">右侧</div>
                </div>
                <p>使用了浮动属性的元素将会影响到其后的内容。使用了浮动属性的元素将会影响到其后的内容。使用了浮动属性的元素将会影响到其后的内容。
                    使用了浮动属性的元素将会影响到其后的内容。使用了浮动属性的元素将会影响到其后的内容。使用了浮动属性的元素将会影响到其后的内容。
                </p>
            </div>
        </section>
       
                <code>.absolute {
                  position: absolute;
                  top:150px;}
                </code>
            </div>
        </section> <section id="position-sec">
            <h2>position</h2>
            <div class="back-top">
                <a href="#">up</a>
            </div>
            <div class="f-l">
                <h2>正常信息流</h2>
                <p>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。</p>
                <p>我微笑着看你在那里耍着那根折下来的小树枝。</p>
                <p class="bg">我正忙着算账，一小时一小时在那里加叠数字。</p>
                <p>也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了！"</p>
                <p>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。</p>
            </div>
            <div class="f-l">
                <h2>相对定位</h2>
                <p>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。</p>
                <p>我微笑着看你在那里耍着那根折下来的小树枝。</p>
                <p class="bg relative">我正忙着算账，一小时一小时在那里加叠数字。</p>
                <p>也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了！"</p>
                <p>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。</p>
                <code>.relative { position: relative; top:150px;}</code>
            </div>
            <div class="f-l" style="position: relative;">
                <h2>绝对定位</h2>
                <p>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。</p>
                <p>我微笑着看你在那里耍着那根折下来的小树枝。</p>
                <p class="bg absolute">我正忙着算账，一小时一小时在那里加叠数字。</p>
                <p>也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了！"</p>
                <p>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。</p>
        <section>
            <h2>居中</h2>
            <div class="center-table">
                <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
            </div>
            <style>
                .center-table {
                    display: table;
                    height: 250px;
                    background: white;
                    width: 240px;
                    margin: 20px;
                }

                .center-table p {
                    display: table-cell;
                    margin: 0;
                    background: black;
                    color: white;
                    padding: 20px;
                    border: 10px solid white;
                    vertical-align: middle;
                }
            </style>
            <style>
                .em-container {
                    background: white;
                    height: 300px;
                    margin: 20px;
                    width: 300px;
                    position: relative;
                    resize: vertical;
                    overflow: auto;
                }

                .em-middle {
                    position: absolute;
                    top: 50%;
                    left: 20px;
                    right: 20px;
                    background: black;
                    color: white;
                    padding: 20px;
                    transform: translateY(-50%);
                    resize: vertical;
                    overflow: auto;
                }
            </style>
            <main class="em-container">
                <div class="em-middle">
                    我是一个块级元素，高度未知，我在父元素中垂直居中。
                </div>
            </main>
        </section>
        <section>
            <style>
                .box-1 {
                    transform: rotate(20deg);
                }

                .box-2 {
                    transform: rotate(-55deg);
                }

                .box-3 {
                    transform: scale(0.5);
                }

                .box-4 {
                    transform: scale(0.5, 1.5);
                }

                .box-5 {
                    transform: translate(20px, 20%);
                }

                .box-6 {
                    transform: translate(-50%);
                }

                .box-7 {
                    transform: skew(15deg);
                }

                .box-8 {
                    transform: skewY(15deg);
                }

                .box-9 {
                    transform: skew(15deg, 15deg);
                }
            </style>
            <div class="box">
                变形
            </div>
        </section>
        <section>
            <style>
                .box {
                    background: #2db34a;
                    /* transition-property: all;
                    transition-duration: 0.3s;
                    transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1) 300px;
                    transition-delay: 3s; */
                    height: 300px;
                    width: 300px;
                    margin: 1em auto;
                    text-align: center;
                    line-height: 300px;
                    transition: all 0.3s ease-in-out 1s;
                }

                .box:hover {
                    background: #ff7b29;
                    border-radius: 300px;
                    border: 4px #CCC double;
                }
            </style>
            <div class="box">
                动画
            </div>
        </section>
        <section>
            <h1 class="animated fadeIn">yguughjgyhujhg</h1>
            <p>knhgfssdfghjghj</p>
        </section>
    </main>
    <footer style="clear: both;">
        <p><span>《网页设计与制作》</span><span>姓名:韦莹莹</span><span>学号：P171212371</span><span>指导老师：杨志宏</span>
        </p>
    </footer>
</body>

</html>